import { defineComponent, onMounted, onUnmounted, watchEffect } from 'vue';
import { RouterView, useRoute } from 'vue-router';
import router from './router';
import { tagsStore } from './stores/tagsStore';
import permissionToken from './utils/permissionToken';
// import { useTheme } from './hook/theme/useTheme';
export default defineComponent({
  name: 'App',
  setup() {
    // useTheme().changePrimary('#009688');
    const route = useRoute();
    const fn = watchEffect(() => {
      const handleAfterRoute = route.matched?.filter((item) => item.path !== '/');
      tagsStore().setBreadcrumb(handleAfterRoute);
    });

    onMounted(() => {
      router && permissionToken();
    });
    onUnmounted(() => {
      fn();
    });
    return () => (
      <>
        <RouterView />
      </>
    );
  },
});
